 /* 首页-匿名投稿的页面样式 */
 
 /* 匿名投稿背景栏 */
 #banner-box {
     width: 100%;
     height: 16vh;
     background-color: RGB(84, 138, 140);
     position: relative;
     display: flex;
 }

 #banner-box>img {
     width: 25vh;
     position: absolute;
    left: 30%;
 }

 /* POST OFFICE  */
 #banner-box .top {
     width: 100vw;
     height: 3.7vh;
     position: absolute;
     top: 0;
     margin: auto;
     left: 0;
     right: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;

 }

 .top img{
     max-width: 20vh;
 }

 #banner-box #click-box,
 #banner-box #flesh-box {
     width: 18vw;
     height: 12vh;
     position: relative;
     float: left;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 #banner-box #click-box {
     /* 通过平移来实现绝对定位 */
     transform: translate(5vw, 4vh);
 }


 #click-box img:nth-child(1) {
    width: 8vh;
     position: absolute;
     top: 0vh;
     /* transform: rotate(-20deg); */
     /* CSS动画：晃动效果 */
     animation: shake 2s;

 }

 /* @keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-0.625rem); }
    50% { transform: translateX(.625rem); }
    75% { transform: translateX(-0.625rem); }
    100% { transform: translateX(.625rem); }
  } */

 #click-box img:nth-child(2) {
     position: absolute;
     bottom: 0;
     width: 7vh;
     /* border: bisque solid 0.3vb; */
 }

 #click-box img:nth-child(3) {
     /* 水平翻转 */
     transform: scaleX(-1);
     position: absolute;
     left: -1vw;
     bottom: 0
 }

 #banner-box #flesh-box {
    /* 通过平移来实现绝对定位 */
    transform: translate(67vw,4vh);
 }

 #flesh-box img:nth-child(1){
    width: 7vh;
    position: absolute;
    top: -2vh;
    left: 0.5vw;
    /* CSS动画：旋转效果 */
    animation: rotate 1s linear;
 }

 @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

 #flesh-box img:nth-child(2){
    width: 13vw;
    position: absolute;
    bottom: 0;
 }

/* 匿名全部消息栏 */
#content-box{
    width: 100vw;
    height: auto;
}

 /* 匿名单条消息栏  */
#content-box .text-box{
    margin-top: 1.5vh;
    width: 97vw;
    height: 20vh;
    background-color: RGB(59,155,231);
    border-radius: 3%;
    position: relative;
    margin-left: 1.5vw;
}

/* 匿名|投稿 时间栏 */
.text-box .text-top{
    width: 96vw;
    height: 4vh;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 2vw;
    margin-bottom: 1vh;
}

.text-top span{
    font-size: 2vb;
    font-weight: bold;
    margin-right: 2vw;
}

.text-top span:first-child{
    background-color:darkcyan;
    border: black solid 0.1vb;
}

.text-top span:last-child{
    position: absolute;
    right: 1vw;
    font-weight: normal;
}

/* 消息内容  */
.text-box .text-middle{
    width: 96vw;
    height: 12vh;
    font-size: 2.2vb;
    color: white;
    margin-bottom: 1vh;
    margin: auto;
    left: 0;
    right: 0;
}

.text-middle p{
    text-indent: 2em; /* 设置首行缩进为2em */
}

/* 底部回复 */
.text-bottom{
    width: 91vw;
    height: 4vh;
    position: relative;
}

.text-bottom span{
    display: flex;
    align-items: center;
}

.text-bottom span:first-child{
    font-size: 2vb;
    position: absolute;
    left: 4vw;
    bottom: 2vh;
}

.text-bottom span:last-child{
    font-size: 2vb;
    position: absolute;
    right: 4vw;
    bottom: 2vh;
}

.text-bottom img{
    width: 3vh;
    margin-right: 1vw;
}